<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
        <title>TODO supply a title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </h:head>
    <h:body>
        <div class="row" style="margin-top: 20px;">
            <div class="col-md-12">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">DANH MỤC</h3>
                    </div>
                    <div class="panel-body">
                        <h:form>
                            <ui:repeat value="#{categoryBean.categorys}" var="category">
                                <div class="row" style="margin-top: 5px;">
                                    <div class="col-md-3">
                                        <img src="#{application.contextPath}/resources/#{category.imagePath}" width="50px" height="50px" alt=""/>
                                    </div>
                                    <div class="col-md-9" style="font-weight: bold;">
                                        <h:commandLink value="#{category.categoryName}" action="#" />
                                    </div>
                                </div>
                            </ui:repeat>
                        </h:form>
                    </div>
                </div>  
            </div>                
        </div>
        <div class="row">
            <div class="col-md-12" style="margin-top: 10px;">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">BÀI VIẾT GẦN ĐÂY</h3>
                    </div>
                    <div class="panel-body">
                        <h:form>
                            <ui:repeat value="#{postManagement.postListRecent}" var="post">
                                <div class="row" style="margin-top: 5px;">
                                    <div class="col-md-3">
                                        <img src="#{application.contextPath}/resources/#{post.category.imagePath}" width="50px" height="50px" alt=""/>
                                    </div>
                                    <div class="col-md-9" style="font-weight: bold;">
                                        <h:commandLink value="#{post.title}" action="#" actionListener="#{postManagement.addViewer(post)}" />
                                    </div>
                                </div>

                            </ui:repeat>
                        </h:form>
                    </div>
                </div>  
            </div>                
        </div>
        <div class="row">
            <div class="col-md-12" style="margin-top: 10px;">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active"><a href="#home" role="tab" data-toggle="tab">LƯỢT XEM</a></li> 
                    <li><a href="#profile" role="tab" data-toggle="tab">BÌNH CHỌN</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="home">
                        <h:form>
                            <ui:repeat value="#{postManagement.postListMostViewed}" var="post">
                                <div class="row" style="margin-top: 5px;">
                                    <div class="col-md-3">
                                        <img src="#{application.contextPath}/resources/#{post.category.imagePath}" width="50px" height="50px" alt=""/>
                                    </div>
                                    <div class="col-md-9" style="font-weight: bold;">
                                        <h:commandLink value="#{post.title}" action="#" actionListener="#{postManagement.addViewer(post)}" />
                                    </div>
                                </div>
                            </ui:repeat>
                        </h:form>
                    </div>
                    <div class="tab-pane" id="profile">
                        <h:form>
                            <ui:repeat value="#{postManagement.postListMostVoted}" var="post">
                                <div class="row" style="margin-top: 5px;">
                                    <div class="col-md-3">
                                        <img src="#{application.contextPath}/resources/#{post.category.imagePath}" width="50px" height="50px" alt=""/>
                                    </div>
                                    <div class="col-md-9" style="font-weight: bold;">
                                        <h:commandLink value="#{post.title}" action="#" actionListener="#{postManagement.addViewer(post)}" />
                                    </div>
                                </div>

                            </ui:repeat>
                        </h:form>
                    </div>
                </div>
            </div>                
        </div>
    </h:body>
</html>
